<template>
	<div v-loading="loading">
		<el-form ref="formRef" :rules="rules" :model="formData" label-width="170px">
			<el-card shadow="never" class="!border-none">
				<div class="text-xl font-medium mb-[20px]">微信公众号</div>
				<el-form-item label="公众号名称：" prop="name">
					<div class="w-80">
						<el-input v-model.trim="formData.name" placeholder="请输入公众号名称" />
					</div>
				</el-form-item>
				<el-form-item label="公众号原始ID：" prop="original_id">
					<div class="w-80">
						<el-input v-model.trim="formData.original_id" placeholder="请输入公众号原始ID" />
					</div>
				</el-form-item>
				<el-form-item label="公众号二维码：" prop="qr_code">
					<div class="w-80">
						<imageUpload v-model="formData.qr_code" promptText="建议尺寸：400*400" :limit="1" />
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">开发者</div>
				<el-form-item label="AppID：" prop="app_id" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_id" placeholder="请输入AppID"></el-input>
						<div class="el-form-tips">微信公众平台>登录公众号账号>设置>开发设置，获取AppID</div>
					</div>
				</el-form-item>
				<el-form-item label="AppSecret：" prop="app_secret" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_secret" placeholder="请输入AppSecret"></el-input>
						<div class="el-form-tips">微信公众平台>登录公众号账号>设置>开发设置，获取AppSecret</div>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">消息推送</div>
				<el-form-item label="接口地址：" prop="server_url">
					<div class="w-[400px]">
						<el-input v-model="formData.server_url" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.server_url)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="验证token：" prop="token">
					<div class="w-[400px]">
						<el-input v-model.trim="formData.token" placeholder="请输入验证token" />
					</div>
				</el-form-item>
				<el-form-item label="消息加密方式：" required>
					<div>
						<el-radio-group v-model="formData.encryption_type">
							<el-radio :label="1">明文模式</el-radio>
							<el-radio :label="2">兼容模式</el-radio>
							<el-radio :label="3">安全模式</el-radio>
						</el-radio-group>
						<div class="el-form-tips">{{ getEncryptionTips }}</div>
					</div>
				</el-form-item>
				<el-form-item label="EncodingAESKey：" prop="encoding_aes_key">
					<div class="w-[400px]">
						<el-input v-model.trim="formData.encoding_aes_key" placeholder="请输入EncodingAESKey" />
						<div class="el-form-tips">消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9</div>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">功能设置</div>
				<el-form-item label="业务域名：" prop="business_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.business_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.business_domain)">复制链接</el-button>
							</template>
						</el-input>
						<div class="el-form-tips">微信公众平台>设置与开发>设置>功能设置，设置业务域名</div>
					</div>
				</el-form-item>
				<el-form-item label="JS接口安全域名：" prop="js_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.js_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.js_domain)">复制链接</el-button>
							</template>
						</el-input>
						<div class="el-form-tips">微信公众平台>设置与开发>设置>功能设置，设置JS接口安全域名</div>
					</div>
				</el-form-item>
				<el-form-item label="网页授权域名：" prop="auth_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.auth_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.auth_domain)">复制链接</el-button>
							</template>
						</el-input>
						<div class="el-form-tips">微信公众平台>设置与开发>设置>功能设置，设置网页授权域名</div>
					</div>
				</el-form-item>
				<el-form-item label="微信校验文件：" prop="qr_code">
					<div class="w-[400px]">
						<fileUpload v-model="formData.verify_file_url" saveDir="/" name="TM_FILE_ORIGINAL_NAME" :isDialog="false" promptText="配置微信网页授权域名时下载的微信校验文件，在此处上传文件" :limit="2" />
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'channel/setWechatConfig'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="channelWechat">
import { ref, reactive, onMounted, computed } from 'vue';
import { getWechatConfig, setWechatConfig } from '/@/api/channel/wechat';
import { messageSuccess } from '/@/utils/message';
import commonFunction from '/@/utils/commonFunction';

const { copyText } = commonFunction();

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
	name: '', // 公众号名称
	original_id: '', // 原始ID
	qr_code: '', // 公众号二维码
	app_id: '', // appId
	app_secret: '', // appSecret
	server_url: '', // 接口地址
	verify_file_url: '', // 网页授权校验文件
	token: '', // token
	encryption_type: 1, // 加密方式
	encoding_aes_key: '', // EncodingAESKey
	business_domain: '', //业务域名
	js_domain: '', //js接口安全域名
	auth_domain: '', //授权域名
});

const getEncryptionTips = computed(() => {
	switch (formData.encryption_type) {
		case 1:
			return '明文模式下，不使用消息体加解密功能，安全系数较低';
		case 2:
			return '兼容模式下，明文、密文将共存，方便开发者调试和维护';
		default:
			return '安全模式下，消息包为纯密文，需要开发者加密和解密，安全系数高';
	}
});

// 表单验证
const rules = {
	app_id: [{ required: true, message: '请输入AppID', trigger: ['blur'] }],
	app_secret: [{ required: true, message: '请输入AppSecret', trigger: ['blur'] }],
};

// 获取数据
const getData = async () => {
	const data = await getWechatConfig();
	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setWechatConfig(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
